<extend name="Base/base" />
<block name="button">
	
	<button class="btn btn-primary" type="submit" form="form"><i class="fa fa-save"></i> {:L('text_save')}</button>
</block>
<block name="body">
	<if condition="$msg">
		<div class="alert alert-danger alert-dismissible fade in" role="alert">
		      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
		      {$msg.warning}

		    </div>
	</if>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4><i class="fa fa-pencil fa-fw"></i>  {$heading_title}</h4>
		</div>
		<div class="panel-body">
			<form action="" method="post" id="form" class="form-horizontal">
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#tab-general" data-toggle="tab">{:L('tab_general')}</a>
					</li>
					<li>
						<a href="#tab-text" data-toggle="tab">{:L('tab_text')}</a>
					</li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="tab-general">
						<div class="form-group required">
							<label for="input-name" class="col-sm-2 control-label">{:L('entry_name')}</label>
							<div class="col-sm-10">
								<input type="text" value="{$feature.name|default=''}" placeholder="{:L('entry_name')}" name="name" class="form-control" id="input-name">
								<if condition="isset($msg['name'])">
								{:danger_msg($msg['name'])}
								</if>
							</div>								
						</div>
						<div class="form-group">
							<label for="input-status" class="control-label col-sm-2">{:L('text_status')}</label>
							<div class="col-sm-10">
								<select name="status" id="input-status" class="form-control">
									<option value="1">{:L('text_enabled')}</option>
									<option <if condition="isset($feature['status']) && ($feature['status'] eq 0)">selected</if> value="0">{:L('text_disabled')}</option>						
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="input-link" class="col-sm-2 control-label">{:L('entry_link')}</label>
							<div class="col-sm-10">
								<input type="text" placeholder="{:L('entry_link')}" class="form-control" value="{$feature.link|default=''}" name="link" id="input-link">
							</div>
						</div>
						<div class="form-group">
							<label for="input-article" class="col-sm-2 control-label">{:L('entry_article')}</label>
							<div class="col-sm-10">
								<input type="text" id="input-article" name="article_title"  class="form-control" placeholder="{:L('entry_article')}" autocomplete="off">
								<div id="feature-article" class="well well-sm" style="height: 150px; overflow: auto;">
					                <foreach name="feature['article']" item="article">
					                <div id="feature-article{$article.article_id}"><i class="fa fa-minus-circle"></i> {$article.title}
					                  <input type="hidden" name="article[]" value="{$article.article_id}" />
					                </div>
					                </foreach>
					            </div>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-text">
						<ul class="nav nav-tabs">
						<foreach name="languages" key="key" item="language">
							<li class="{$key?'':'active'}">
								<a href="#language{$language.language_id}" data-toggle="tab"><img src="__PUBLIC__/Images/flags/{$language.image}">  {$language.name}</a>
							</li>
						</foreach>
						</ul>
						<div class="tab-content">
							<foreach name="languages" key="key" item="language">
								<div class="tab-pane {$key?'':'active'}" id="language{$language.language_id}">
									<div class="form-group">
										<label for="input-title{$language.language_id}" class="col-sm-2 control-label">{:L('entry_title')}</label>
										<div class="col-sm-10">
											<input type="text" name="module_description[{$language.language_id}][title]" value="{$feature['module_description'][$language['language_id']]['title']|default=''}" placeholder="{:L('entry_title')}" id="iput-title{$language.language_id}" class="form-control">
										</div>
									</div>
								</div>
							</foreach>
						</div>
					</div>
				</div>				
			</form>
			
		</div>
		
	</div>
</block>
<block name="script">
	<script type="text/javascript">
		var autourl='{:U("Article/autocomplete")}';
		$('input[name=\'article_title\']').autocomplete({'source': function(request, response) {
				$.ajax({
					url: autourl + (autourl.indexOf('?')<0?'?':'&') + 'filter_title=' +  encodeURIComponent(request),
					dataType: 'json',
					success: function(json) {
						response($.map(json, function(item) {
							return {
								label: item['title'],
								value: item['article_id']
							}
						}));
					}
				});
			},
			'select': function(item) {
				$('input[name=\'article_title\']').val('');		
				$('#feature-article' + item['value']).remove();
				$('#feature-article').append('<div id="feature-article' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="article[]" value="' + item['value'] + '" /></div>');	
			}
		});
		$('#feature-article').delegate('.fa-minus-circle', 'click', function() {
			$(this).parent().remove();
		});
	</script>
</block>
